<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			.parent {
				border: 1px solid #AAAAAA;

				/* 辅助样式 */
				max-width: 500px;
				background: #FFFF00;
			}

			.lf,
			.rf {
				width: 2em;
				height: 2em;
				background: #000000;
			}

			.lf {
				float: left;
			}

			.rf {
				float: right;
			}


			.clear-float:before,
			.clear-float:after {
				content: '';
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>

		<!-- 
		 
		如果没有设置 父元素 宽 高的情况下，
		
		子元素设置为浮动后，没有办法 把父元素的高度 撑起来的。
		
		
		解决方法 在父元素 上面 添加 清除浮动 
		 -->
		<div class="parent clear-float">
			<div class="lf"></div>
			<div class="rf"></div>
		</div>
	</body>
</html>
